<!--echarts  -->
<template>
  <div class="echarts">
    <div :ref="echartsRef" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script  >

export default {
  props: {
    echartsRef: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      required: true
    },
    width: {
      type: String,
      default: () => '100%'
    },
    height: {
      type: String,
      default: () => '300px'
    }
  },
  watch: {
    options: {
      deep: true,
      // immediate: true,
      handler(newVal) {
        this.init(newVal)
      }
    },
  },


  mounted() {
    this.init(this.options)
  },
  methods: {
    init(newVal) {

      let myCharts = this.$echarts.init(this.$refs[this.echartsRef]);
      if (myCharts) {
        myCharts.clear()
        myCharts.setOption(newVal, true)
        window.onresize = myCharts.resize;
      }
    }
  }
}



</script>
<style lang='less' scoped>

</style>
